<template>
    <div id="box">
        <nav-bar>
            <template v-slot:default>个人中心</template>
        </nav-bar>
        <div class="user-box">
            <div class="user-info">
                <img src="@/assets/images/user.png"/>
                <div class="user-desc">
                    <span>昵称：{{user.name}}</span>
                    <span>登入名：{{user.email}}</span>
                    <span class="name">个性签名：</span>
                </div>
            </div>
            <ul class="user-list">
            <li class="van-hairline--bottom" @click="goTo('/collect')">
                <span>我的收藏</span>
                <van-icon name="arrow"/>
            </li>
            <li class="van-hairline--bottom" @click="goTo('/order')">
                <span>我的订单</span>
                <van-icon name="arrow"/>
            </li>
            <li class="van-hairline--bottom" @click="goTo('/setting')">
                <span>账号管理</span>
                <van-icon name="arrow"/>
            </li>
            <li class="van-hairline--bottom" @click="goTo('/address')">
                <span>地址管理</span>
                <van-icon name="arrow"/>
            </li>
            <li class="van-hairline--bottom" @click="goTo('/about')">
                <span>关于我们</span>
                <van-icon name="arrow"/>
            </li>
        </ul>
        </div>
        <!-- <Login></Login> -->
        <div style="margin:15px;margin-top:0px;" class="one">
        <van-button   @click="tologout" round block color="#44BA80">退出登录</van-button>
    </div>
    </div>

    <!-- <div>
        <nav-bar>
        <template v-slot:default>商品详情：{{id}}</template>
       </nav-bar>
    
      
    </div> -->
    
</template>
<style>
#box{
    background-color: #fcfcfc;
    height: 100vh;
}
.user-box{
    margin-top: 65px;
}
.user-header{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 44px;
    line-height: 44px;
    padding: 1 10px;
    color: #000;
    background: #fcfcfc;
    border-bottom: 1px solid #dcdcdc;
}
.user-name{
    font-size: 14px;
}
.user-info{
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 25px 20px;
}
img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-top: -5px;

}
.user-desc{
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    line-height: 20px;
    font-size: 14px;
    color: #fcfcfc;
}
.user-desc span{
    color: #212020;
    font-size: 14px;
    padding: 2px 0;
}
.account-setting{
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 13px;
    color: #fff;
}
.van-icon-setting-o{
    font-size: 16px;
    vertical-align: -3px;
    margin-right: 4px;
}
.user-list{
    padding: 0 8px;
    margin-top: 40px;
}
li{
    padding-left: 5px;
    padding-right: 5px;
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin: 20px 0 !important;
    background: #fff;
    border-radius: 3px;

}

.van-icon-arrow{
    margin-top: 13px;
}

</style>
<script>

import { logout,getUser } from '@/network/user';
import { onMounted,reactive,toRefs } from 'vue';
import { useStore } from 'vuex';
import { Toast } from 'vant';
import { useRouter } from 'vue-router';
import NavBar from '@/components/common/NavBar/NavBar.vue';
import Login from './Login.vue';
export default{
    name:"Profile",
    components:{
    NavBar,
    Login
},
setup(){
    const router=useRouter()
    const store=useStore()
    const state = reactive({
        user:{}
    })
    onMounted(()=>{
        getUser().then(res=>{
            console.log(res);
            state.user=res
        })
    })
    const tologout=()=>{
        logout().then(res=>{
            if(res.status=='204'){
                Toast.success('退出成功')
                // 清除token
                window.localStorage.setItem('token','')
            
                store.commit('setIsLogin',false)
                setTimeout(()=>{
                    router.push('/login')
                },500)

            }
        })
    }
//    跳转方法
const goTo=(path,query)=>{
    router.push({path,query:query || {}})
}
    return{
       tologout,
       ...toRefs(state),
       goTo

    }
}
}
</script>

<!-- 
    hairline：发丝 arrow：箭头  to logout：注销 collect:收集 order:订单 setting:设置 about:关于
    slot：插槽 storage:存储 Mounted:安装 reactive:活性 state:状态 path:路径  vertical:垂直
 -->